<template>
    <div class="w-full">
        <!-- 控制列数的部分 -->
        <div class="flex items-center gap-4 mb-6">
            <label class="font-semibold">每行列数：</label>
            <div class="flex items-center gap-2">
                <!-- 图标按钮 -->
                <button v-for="option in columnOptions" :key="option" @click="changeColumns(option)" :class="[
                        'p-2 rounded transition duration-300',
                        columns === option ? 'bg-[var(--playBg)] text-white' : 'bg-gray-200 hover:bg-gray-300'
                    ]">
                    <!-- 动态渲染列数图标 -->
                    <i :class="`i-columns-${option}`"></i>
                </button>
            </div>
        </div>

        <!-- 动态网格布局 -->
        <div class="grid gap-6 transition-all duration-1000" :class="{
            'grid-cols-2': columns === 2,
            'grid-cols-3': columns === 3,
            'grid-cols-4': columns === 4,
        }">
            <div @click="gotoDetail" v-for="(post, index) in postList" :key="post.id"
                class="flex flex-col bg-white shadow-md rounded-lg p-4 hover:shadow-lg transition-shadow duration-300">
                <!-- 用户信息 -->
                <div class="flex items-center mb-4 justify-between">
                    <div class="flex items-center">
                        <img :src="post.userInfo.avatar" alt="User" class="w-12 h-12 rounded-full object-cover mr-4" />
                        <div>
                            <p class="font-semibold text-sm">{{ post.userInfo.username }}</p>
                            <p class="text-gray-500 text-sm">5个月前</p>
                        </div>
                    </div>
                    <!-- 自定义语音条 -->
                    <div>
                        <VoiceSignCard :voiceSign="post.voiceInfo" />
                    </div>
                </div>

                <!-- 媒体信息 -->
                <div class="relative mb-4">
                    <img :src="post.media[0]" alt="Media" class="object-cover w-full rounded-lg h-60" />
                    <div class="absolute top-2 right-2 bg-black bg-opacity-50 text-white text-xs rounded px-2 py-1">
                        {{ 1 }} / {{ post.media.length }}
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { ref, onMounted } from "vue";
    import { getNewPost } from "@renderer/api/voice";
    import { useRouter } from 'vue-router'

    const router = useRouter()


    const postList = ref([]);
    const columns = ref(3); // 默认列数
    const columnOptions = [2, 3, 4]; // 可选列数

    onMounted(() => {
        getNewPostList();
    });

    const gotoDetail = (id) => {
        let scrollValue = document.querySelector('#main')?.scrollTop
        router.push({ path: '/postDetail', query: { id: id, scrollValue } })
    }

    // 获取数据
    const getNewPostList = async () => {
        const response = await getNewPost(1);
        postList.value = response.result.data;
    };

    // 更新列数
    const changeColumns = (option: number) => {
        if (columnOptions.includes(option)) {
            columns.value = option;
        }
    };
</script>

<style scoped>
    /* 自定义列数图标样式 */
    .i-columns-2::before {
        content: '⬛⬛';
        display: inline-block;
        font-size: 0.8rem;
        color: var(--text);
    }

    .i-columns-3::before {
        content: '⬛⬛⬛';
        /* 3列图标 */
        display: inline-block;
        font-size: 0.8rem;
    }

    .i-columns-4::before {
        content: '⬛⬛⬛⬛';
        /* 4列图标 */
        display: inline-block;
        font-size: 0.8rem;
    }
</style>